<template>
	<view>
		<view v-if="!videoDetailsShow" :style="'background-color:' + huodong.background" style="min-height: 100vh; height: auto !important;">
			<view class="share" @click="toast">邀约海报</view>
			<view class="rank" @click="toast">邀约排行</view>

			<view class="top"><img :src="huodong.headimage" class="top-img" style="width: 100%;" /></view>
			<view class="main-video">
				<video
					:src="huodong.mainvideo"
					x5-video-player-type="h5-page"
					controls
					:poster="huodong.main_video_cover"
					loop="true"
					autoplay="true"
					:show-fullscreen-btn="false"
				></video>
			</view>
			<view class="enter-btn">
				<button class="enter-btn-con" @tap="openSign(0, 'center')">立即报名</button>
			</view>
			
			<openAlert :BgColor="BgColor" closeBtn ref="openAlertSign" :AlertClass="AlertClass" :AlertPosition="AlertPosition"
			 :shadeClose="false">
				<scroll-view class="info" scroll-y>
					<view class="info-text">报名信息</view>
					<form @submit="pay">
						<view class="sign-row">
							<view class="sign-label">姓名:</view>
							<input type="text" @blur="names()" disabled placeholder="请输入您的姓名" />
						</view>
						<view class="sign-row">
							<view class="sign-label">手机号码:</view>
							<input type="number" @blur="phoneshow()" maxlength="11" disabled placeholder="请输入您的手机号码" />
						</view>
				
						<block v-for="(item, index) in huodong.extra_field_config" :key="index">
							<block v-if="item.type.key == 'string'">
								<view class="sign-row">
									<view class="sign-label">{{ item.toast }}:</view>
									<input type="text" :name="item.name" disabled :placeholder="'请输入' + item.toast" />
								</view>
							</block>
							<block v-if="item.type.key == 'textarea'">
								<view class="sign-row-manyimg">
									<view class="sign-label">{{ item.toast }}:</view>
									<textarea type="text" :name="item.name" disabled :placeholder="'请输入' + item.toast"></textarea>
								</view>
							</block>
							<block v-if="item.type.key == 'oneimg'">
								<view class="sign-row-manyimg">
									<view class="sign-label">{{ item.toast }}:</view>
									<view>
										<input :name="item.name" v-model="item[index]" style="display: none;" />
										<image v-if="item[index]" :src="item[index]" style="width: 100rpx; height: 100rpx;" @click="pay"></image>
										<image src="../../static/add1.png" style="width: 100rpx; height: 100rpx;" @click="pay"></image>
									</view>
								</view>
							</block>
							<block v-else-if="item.type.key == 'manyimg'">
								<view class="sign-row-manyimg">
									<view class="sign-label">{{ item.toast }}:</view>
									<view>
										<input :name="item.name" v-model="item[index]" style="display: none;" />
										<block v-if="item[index]">
											<image v-for="(item2, index2) in image_list_arr" :key="index2" :src="item2" style="width: 100rpx; height: 100rpx;"></image>
										</block>
										<image src="../../static/add1.png" style="width: 100rpx; height: 100rpx;" @click="pay"></image>
									</view>
								</view>
							</block>
							<block v-else-if="item.type.key == 'radio'">
								<view class="sign-row-radio">
									<view class="sign-label">{{ item.toast }}:</view>
									<view class="sign-value">
										<radio-group :name="item.name" >
											<block v-for="(item2,index2) in radioitem" :key="index2">
												<radio :value="item2.key">{{item2.key}}</radio>
											</block>
										</radio-group>
									</view>
								</view>
							</block>
							<block v-else-if="item.type.key == 'checkbox'">
								<view class="sign-row-radio">
									<view class="sign-label">{{ item.toast }}:</view>
									<view class="sign-value">
										<radio-group :name="item.name" >
											<block v-for="(item2,index2) in radioitem" :key="index2">
												<radio :value="item2.key">{{item2.key}}</radio>
											</block>
										</radio-group>
									</view>
								</view>
							</block>
						</block>
						<button form-type="submit" class="pay">支付{{huodong.price}}元报名</button>
					</form>
					<view class="pay-text">*仅限家具经销商报名有效，消费者和厂家等经审核无效。</view>
				</scroll-view>
			 </openAlert>
			
			<view class="enter-title">
				已有
				<span class="enter-count">8</span>
				人报名成功
			</view>
			<view class="enter-list">
				<block v-for="(item, index) in enter_list" :key="index"><image class="enter-head" :src="item.headimgurl"></image></block>
			</view>

			<block v-for="(item, index) in huodong.mvideo" :key="index">
				<view class="video-list">
					<!-- <view class="video-list-title" @click="go_to_video(item.id)">{{ item.title }}</view> -->
					<!-- <view class="video-list-con" @click="go_to_video(item.id)"> -->
					<view class="video-list-title" @tap="openvideo(index)">{{ item.title }}</view>
					<view class="video-list-con" @tap="openvideo(index)">
						<video
							:src="item.video_url"
							x5-video-player-type="h5-page"
							controls
							:poster="item.video_cover"
							loop="true"
							autoplay="true"
							:show-fullscreen-btn="false"
						><!-- poster="https://jbh.4coder.org.cn/web/video_bg.jpg" --></video>
					</view>
				</view>
			</block>

			<view class="bottom"><img :src="huodong.footimage" class="top-img" style="width: 100%;" /></view>

			<view class="foot">
				<view>唯宅播提供技术支持</view>
			</view>
			<view style="height: 80rpx; width: 750rpx;"><!-- <view class="">安全距离</view> --></view>
		</view>
		
		<view v-else>
			<view class="d-flex flex-column a-center" :style="huodong.background ? 'background-color:' + huodong.background : 'background-color: #f1f1f1'" style="width: 750rpx; min-height: 100vh; height: auto !important; padding-bottom: 100rpx;">
				<view class="video-content">
					<view class="share" @click="toast">邀约海报</view>
				
					<view class="top"><img :src="huodong.vidtopimg" class="top-img" style="width: 100%;" /></view>
					<view class="video-title">{{ title }}</view>
					<view class="main-video">
						<video
							:src="url"
							x5-video-player-type="h5-page"
							controls
							:poster="cover"
							loop="true"
							autoplay="true"
							:show-fullscreen-btn="false"
						></video>
					</view>
					
					<button class="enter-btn-con" @click="back_home">进入报名</button>
				</view>
			</view>
		</view>
		
		<view style="position: fixed; bottom: 0; background-color: #fff; color: #f00; display: flex; flex-direction: column; text-align: center; width: 750rpx;padding-bottom: 10rpx; padding-top: 10rpx; border-top: 2rpx solid #ccc;">
			<span>预览说明:预览只做展示,报名人数等数据为虚假数据</span>
		</view>
		
	</view>
</template>

<script>
require('../../components/poster/poster_maker.js');
import openAlert from '@/components/open-alert/open-alert';
export default {
	components: {
		openAlert,
	},
	props: {
		huodong: null,
	},
	data() {
		return {
			BgColor: 'rgba(0,0,0,0.5)',
			AlertClass: 0,
			AlertPosition: '',
			enter_list: [{headimgurl: '../../static/headimgurlerror.jpg',
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg'
				},{headimgurl: '../../static/headimgurlerror.jpg',
				}],
			title: '',
			url: '',
			cover: '',
			videoDetailsShow: false,
			image_list_arr: [],
			radioitem: [],
		};
	},
	methods: {
		pay(){
			uni.showToast({
				title: '预览只做展示作用，请勿重复点击！',
				icon: 'none',
				duration: 2000
			})
		},
		
		openSign(Class, Position) {
			this.$nextTick(function() {
				this.AlertClass = Class;
				this.AlertPosition = Position;
				this.$nextTick(function() {
					this.$refs.openAlertSign.Show();
				});
			});
		},
		
		openvideo(index) {
			this.videoDetailsShow = true
			this.title = this.huodong.mvideo[index].title
			this.url = this.huodong.mvideo[index].video_url
			this.cover = this.huodong.mvideo[index].video_cover
		},
		
		toast() {
			uni.showToast({
				title: '预览时该控件无事件',
				icon: 'none'
			})
		},
		
		back_home(){
			this.videoDetailsShow = false
		},
	},
}
</script>

<style lang="scss" scoped>
	@import '@/common/main.css';
	@import  '@/common/zcm-main.css';
.info {
	z-index: 9999;
	border-radius: 20rpx;
	background-color: white;
	width: 620rpx;
	padding-bottom: 20rpx;
	max-height: 980rpx;

	.info-text {
		text-align: center;
		font-weight: bold;
		padding: 20rpx 0;
		font-size: 35rpx;
	}

	.info-name {
		font-size: 30rpx;
		display: flex;
		// margin-left: 50rpx;
		margin: 40rpx 20rpx;
		align-items: center;
		input {
			margin-left: 30rpx;
			font-size: 30rpx;
		}
		view {
			// letter-spacing:2em;

			width: 130rpx;
		}
	}

	.striping {
		height: 1rpx;
		width: 100%;
		background-color: #c0c0c0;
	}

	.info-phone {
		font-size: 30rpx;
		display: flex;
		// margin-left: 50rpx;
		margin: 40rpx 20rpx;
		align-items: center;
		// justify-content: space-between;
		input {
			margin-left: 30rpx;
			font-size: 30rpx;
		}
		view {
			width: 130rpx;
			// width: 250rpx;
		}
	}

	.pay {
		width: 90%;
		background-color: #4a69ff;
		color: white;
		border-radius: 50rpx;
		margin-left: 5%;
		text-align: center;
		margin-top: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.pay-text {
		font-size: 25rpx;
		color: #4a69ff;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 60rpx;
	}

	.free {
		width: 90%;
		color: #b3b3b3;
		border-radius: 50rpx;
		margin-left: 5%;
		text-align: center;
		padding: 20rpx 0;
		border: 1rpx solid #b3b3b3;
		margin-top: 50rpx;
	}

	.free-text {
		font-size: 25rpx;
		color: #b3b3b3;
		text-align: center;
		margin-top: 20rpx;
		padding-bottom: 50rpx;
	}

	.foot {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;

		image {
			height: 100rpx;
			width: 100rpx;
			z-index: 9999;
			margin: 20rpx 0;
		}
	}
	.sign-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		border-bottom: 1px solid #efefef;
		padding: 0 20rpx;

		input {
			width: 480rpx;
		}
	}
	
	.sign-row-radio {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20rpx;
		line-height: 80rpx;
		radio {
			margin-right: 30rpx;
			font-size: 26rpx;
		}
		border-bottom: 1px solid #efefef;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}

	.sign-row-manyimg {
		line-height: 80rpx;
		border-bottom: 1px solid #efefef;
		padding: 0 20rpx;
		image {
			padding: 10rpx;
			margin-left: 20rpx;
			border: 1px solid #efefef;
		}
		textarea {
			height: 200rpx;
		}
	}

	.sign-label {
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		font-size: 30rpx;
		width: 200rpx;
	}
	.sign-value{
		width: 480rpx;
		line-height: 40rpx;
		
	}
}

.video-title {
	font-size: 40rpx;
	color: #fff;
	margin-bottom: 50rpx;
	text-align: center;
}
.top {
	position: relative;
}
.top-img {
	position: relative;
}
.container_style {
	height: 100%;
}
.share {
	width: 160rpx;
	line-height: 50rpx;
	background-color: #2c405a;
	position: fixed;
	right: 0;
	top: 80rpx;
	border-radius: 25rpx 0 0 25rpx;
	color: #ffffff;
	text-align: center;
	font-size: 28rpx;
	z-index: 100;
}
.rank {
	width: 160rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	background-color: #2c405a;
	position: fixed;
	right: 0;
	top: 155rpx;
	border-radius: 25rpx 0 0 25rpx;
	color: #ffffff;
	text-align: center;
	z-index: 2;
}
.main-video {
	text-align: center;
}
.main-video video {
	width: 710rpx;
	height: 400rpx;
}
.video-list-con video{
	width: 710rpx;
	height: 400rpx;
}
.enter-btn-con {
	width: 400rpx;
	background-color: #fff700;
	color: #495ffe;
	border-radius: 50rpx;
	margin-top: 30rpx;
	font-weight: bold;
	font-size: 35rpx;
}
.enter-btn-con:after {
	border: none;
}
.enter-title {
	text-align: center;
	color: #ffffff;
	font-size: 30rpx;
	margin-top: 20rpx;
}
.enter-head {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.enter-count {
	color: #f5eb25;
}
.enter-list {
	padding: 0 20rpx;
	height: 250rpx;
}
.enter-list image {
	margin-left: 20rpx;
	display: inline-block;
}
.video-list {
	margin-top: 30rpx;
	text-align: center;
}
.video-list video {
	width: 710rpx;
}
.video-list-title {
	font-size: 40rpx;
	color: #ffffff;
	margin-bottom: 10rpx;
}
.foot {
	border-top: 1px solid #bbbbbb;
	line-height: 50rpx;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
}
.haibao-open {
	height: 1000rpx;
}
.qrimg {
	height: 0;
	overflow: hidden;
}
.baoming-form {
	width: 600rpx;
	height: 500rpx;
	background-color: #ffffff;
	border-radius: 5rpx;
}
.invite-head {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	font-weight: bold;
	font-size: 28rpx;
	margin-top: 20rpx;
}
.invite-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 30rpx;
	line-height: 60rpx;
	margin-top: 20rpx;
}
.invite-title {
	font-weight: bold;
	font-size: 38rpx;
	text-align: center;
	color: rgb(255, 147, 24);
}
.invite-content {
	margin-top: 20rpx;
}
.invite-list {
	width: 650rpx;
	height: 800rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
}
.rank-text{
	width: 80rpx;
	text-align: center;
	color: #808080;
}
.rank-title{
	width: 380rpx;
	text-align: center;
	color: #808080;
}
.rank-count{
	width: 140rpx;
	text-align: center;
	color: rgb(253, 95, 30);
}

.fission_content{
	line-height: 50rpx;
	width: 700rpx;
	background-color: #FFFFFF;
	padding: 20rpx;
	text-align: center;
}

.qrcode {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		// padding-top: 20rpx;
		border-radius: 20rpx;
		width: 650rpx;
		// padding-bottom: 50rpx;
		height: 1100rpx;

		view {
			font-size: 30upx;
			text-align: center;
		}

		.success-sign {
			background-color: #22ac38;
			width: 400rpx;
			color: white;
			margin: auto;
			padding: 10rpx;
			border-radius: 50rpx;
		}

		.qrcode-text {
			color: black;
			font-size: 35rpx;
			font-weight: bold;

		}

		.qrcode-video {
			height: 360rpx;
			width: 600rpx;
			// margin-top: 0rpx;
			margin: 20rpx auto;

			view {
				font-size: 35rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			video {
				height: 100%;
				width: 100%;
				object-fit: fill
			}

		}

		.content-title {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			margin-top: 70rpx;
			flex-direction: column;

			.content-view {
				display: flex;
				flex-direction: column;
				align-items: center;

				.title-name {
					font-size: 30rpx;
				}

				.download {
					text-align: center;

					.image-header {
						height: 80rpx;
						width: 80rpx;
						border-radius: 50rpx;
					}

					.invite-success {
						display: flex;
						align-items: center;
						// margin-left: 50rpx;
						justify-content: space-between;

					}

					.success {
						color: #495ffe;
						margin-top: 10rpx;


					}

					.invite-share {
						background-color: #007AFF;
						color: white;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
						margin: 10rpx 0;
					}

					.invite-fail {
						line-height: 30rpx;
						height: 80rpx;
						width: 80rpx;
						border-radius: 40rpx;
						background-color: rgba(0, 0, 0, 0.3);
						margin: auto;

						image {
							height: 40rpx;
							width: 40rpx;
							
						}

						view {
							font-size: 0.5em;
						}

					}

					.invite-success-share {
						background-color: #da0000;
						color: white;
						font-weight: bold;
						padding: 10rpx;
						border-radius: 50rpx;
						margin: 20rpx 0;
						font-size: 25rpx;
						padding: 12rpx 20rpx;
					}

					.download-view {
						width: 80%;
						color: white;
						padding: 10rpx;
						border-radius: 30rpx;
						background-color: #22ac38;
						margin-top: 10rpx;
					}

					.download-fail {
						border: 1rpx solid #a0a0a0;
						color: #a0a0a0;
						margin-top: 10rpx;

						padding: 10rpx 80rpx;
						border-radius: 30rpx;
						background-color: white;

					}
				}
			}
		}

		.live {
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin-top: 20rpx;


			.live-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-top: 70rpx;
				margin-bottom: 50rpx;

				image {
					width: 330rpx;
					height: 110rpx;
					margin: 40rpx;
				}

				.live-text {
					width: 670rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;


					.live-two {
						display: flex;
						align-items: center;
						margin-top: 5rpx;

					}

					.black {
						height: 15rpx;
						width: 15rpx;
						background-color: black;
						border-radius: 50rpx;
						margin-right: 10rpx;
					}
				}

			}
		}
	}

</style>
